<script type="text/x-template" id="channelmanager">
    <div>
        <el-container>
            <el-header>
                <div style="padding: 10px;height: 50px">
                    <el-form :model="searchform"  label-width="100px" class="demo-ruleForm">
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="栏目名称" >
                                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="栏目路径" >
                                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="3">
                                <div align="center">
                                    <el-button type="primary">搜索</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-header>
            <el-container>
                <el-aside width="15%">
                    <div style="padding: 10px">
                        <el-button type="primary" icon="el-icon-edit" style="width: 100%" @click="addchannel">新建栏目</el-button>
                        <!--  树-->
                        <el-tree :data="data"
                                 :default-checked-keys="checkedkeys"
                                 :props="defaultProps"
                                 node-key="id"
                                 @node-click="handleNodeClick_channel"
                                 style="padding-top: 5px"></el-tree>
                    </div>
                </el-aside>
                <el-container>
                    <el-main>
                        <div style="min-height: 500px;background-color:white; ">
                            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm" style="padding: 20px">
                                <el-form-item label="栏目id">
                                    <el-input v-model="form.id" :readonly="true"></el-input>
                                </el-form-item>
                                <el-form-item label="栏目名称" prop="channelname">
                                    <el-input v-model="form.channelname"></el-input>
                                </el-form-item>

                                <el-form-item label="栏目路径" prop="channelpath">
                                    <el-input v-model="form.channelpath"></el-input>
                                </el-form-item>

                                <el-form-item label="栏目富文本模型" prop="textType">
                                    <el-select size="small" v-model="form.textType" placeholder="请选择栏目富文本模型">
                                        <el-option
                                                v-for="item in texttype"
                                                :key="item.type"
                                                :label="item.typeName"
                                                :value="item.type">
                                        </el-option>
                                    </el-select>
                                </el-form-item>


                                <el-form-item>
                                    <el-button type="primary" @click="submit_channel('form')">立即修改</el-button>
                                    <a v-if="form.id">
                                        <el-button type="danger" @click="delete_channel()">删除此栏目</el-button>
                                    </a>
                                    <el-button @click="resetForm('form')">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>

        <!-- 添加栏目        -->
        <el-dialog title="添加栏目" :visible.sync="dialogFormVisible_addchannel">
            <el-form :model="channelform"  ref="channelform" label-width="100px" class="demo-ruleForm">
                <el-form-item label="上级栏目" prop="channelName">
                    <el-cascader
                            v-model="channelform.channelpid"
                            :options="data"
                            :props="props"
                            style="width: 100%"
                            :clearable="true"
                            @change="handleChange_addchannel"></el-cascader>
                </el-form-item>
                <el-form-item label="栏目名称" prop="channelname">
                    <el-input v-model="channelform.channelname"></el-input>
                </el-form-item>
                <el-form-item label="栏目路径" prop="channelpath">
                    <el-input v-model="channelform.channelpath"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit_channel_add('channelform')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

    </div>
</script>

<script>
    let channelmanager={
        data() {
            return {
                texttype:[],
                form:{
                    id:'',
                    channelname:'',
                    channelpath:'',
                    channelpid:'',
                    textType:''
                },
                rules: {
                    channelname: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 3, max: 50, message: '长度在 3 到 50个字符', trigger: 'blur'}
                    ],
                    channelpath:[
                        {required: true, message: '请输入栏目路径', trigger: 'blur'},
                        {min: 3, max: 50, message: '长度在 3 到 50个字符', trigger: 'blur'}
                    ],
                    textType:[
                        {required: true, message: '请输入富文本类型', trigger: 'blur'},
                        {min: 3, max: 50, message: '长度在 3 到 50个字符', trigger: 'blur'}
                    ]
                },
                //默认选中的key
                checkedkeys:[],
                dialogFormVisible_movechannel:false,
                searchform:{},
                activeName_addfile:'first_addfilepath',
                dialogFormVisible_addchannel:false,
                dialogFormVisible_addgroup : false,
                activeIndex: '1',
                activeIndex2: '1',
                total:0,
                input:'',
                tableDataNoteList: [],
                search:'',
                keyword:'',
                data: [],
                defaultProps: {
                    children: 'childs',
                    label: 'channelname'
                },
                props:{
                    children: 'childs',
                    label: 'channelname',
                    value:'id',
                    checkStrictly:true,
                    emitPath:false
                },
                multipleSelection:[],
                channelform:{
                    id:'',
                    channelname:'',
                    channelpath:'',
                    channelpid:''
                },
            }
        },
        template: '#channelmanager',
        created(){
            this.getChannel();
            this.getTextType();
        },
        methods: {
            getTextType(){
              api.GET('/channel/gettexttype',null,(result)=>{
                  if(result.code===0){
                      this.texttype=result.data;
                  }
              })
            },
            //删除栏目
            delete_channel(){
                this.$confirm('是否确定删除栏目'+this.form.channelname, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.POST('/channel/delete',{'id':this.form.id},(result)=> {
                        if(result.code===0){
                            this.$message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getChannel();
                            this.form={};
                            local.reload();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            submit_channel_add(form){
                this.channelform.ispri=false;
                api.POST('/channel/add',this.channelform,(res)=>{
                    if(res.code==0){
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.getChannel();
                        this.dialogFormVisible_addchannel=false;
                        this.channelform={};
                    }else {
                        this.$message.error(res.msg);
                    }
                })
            },
            //确定
            submit_channel(){
                this.$confirm('是否继续修改栏目?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.POST('/channel/update',this.form,(result)=> {
                        if(result.code==0){
                            this.$message({
                                showClose: true,
                                message: '修改成功',
                                type: 'success'
                            });
                            local.reload();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            getChannelById(id){
              api.GET('/channel/getid',{'id':id},(res)=>{
                  if(res.code===0){
                      this.form.channelname=res.data.channelname;
                      this.form.id=res.data.id;
                      this.form.channelpath = res.data.channelpath;
                      this.form.channelpid=res.data.pid;
                      this.form.textType=res.data.textType;
                      this.getChannel();
                  }else {
                      this.$message.error(res.msg);
                  }
              })
            },
            handleChange_addchannel(val){
                console.log(JSON.stringify(val))
            },
            submitForm() {
                api.POST('/channel/add',this.channelform,(res)=>{
                    if(res.code==0){
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.getChannel();
                        this.dialogFormVisible_addchannel=false;
                        this.channelform={};
                    }else {
                        this.$message.error(res.msg);
                    }
                })
            },
            getChannel(){
                api.GET('/channel/getchannel',null,(res)=>{
                    if(res.code===0){
                        this.data=res.data;
                        this.checkedkeys.push(this.data[0].id)
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleNodeClick_channel(data){
                this.getChannelById(data.id);
                console.log(JSON.stringify(data))
            },
            handleClick_file(tab, event){
                console.log(tab, event);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            addchannel(){
                this.channelform={}
                this.dialogFormVisible_addchannel=true;
            },
            addfilepane(){
                this.dialogFormVisible_addpane=true;
            },
            addfilegroup(){
                this.dialogFormVisible_addgroup=true;
            },
            locationfref(href){
                window.open(href);
            },
            handleNodeClick(data) {
                console.log(data);
            },
        }
    }
    Vue.component('channelmanager',channelmanager);
</script>